<template>
  <div class="details">
    <div class="banana">
      <img src="@/assets/image/detailsBlue.png" alt="" />
    </div>
    <div class="titleTips">
      <div class="bread_nav">
        <span style="color:#999;">
          当前位置：
        </span>
        <span style="color:#666;" @click="goResetPath">
          首页 &gt;
        </span>
        <span style="color:#545D71;">{{ breadTitle }} </span>
      </div>
    </div>
    <div style="height:20px;width:100%;background:#F4F5F9;"></div>
    <div class="container" v-if="detailsInfo.type != 'table'">
      <div class="searchInput">
        <el-input placeholder="请输入内容" v-model="searchVal">
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="goSearch"
          ></i>
        </el-input>
      </div>
      <div class="main">
        <head-more width="1320" :title="breadTitle" :isMore="false"></head-more>
        <div class="noticeList">
          <div
            class="noticeList_one clearfix"
            v-for="(item, idx) in noticeArr"
            :key="idx"
            @click="goDetails(item)"
          >
            <div class="fl notice_title">{{ item.NAME }}</div>
            <div class="fr notice_time">{{ item.create_date }}</div>
          </div>
        </div>
        <div class="pageList">
          <aoge-page
            :totalPage="totalPage"
            :total="noticeTotal"
            :currentPage="noticePageNum"
            :pageSize="noticePageSize"
            @handleCurrentChange="handleCurrentChange"
            @goCurrentPage="goCurrentPage"
          ></aoge-page>
        </div>
      </div>
    </div>
    <div class="container" v-if="detailsInfo.type == 'table'">
      <div class="main">
        <head-more
          width="1320"
          :title="breadTitle"
          :isMore="false"
          type="long"
        ></head-more>
        <div class="tableSearch">
          <search-panel
            :searchConfig="searchConfig"
            @search="goTableSearch"
          ></search-panel>
        </div>
        <div class="detailsTable">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{
              'background-color': '#f2f2f2',
            }"
          >
            <el-table-column
              prop="xmdm"
              label="项目代码"
              width="200"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="xmmc"
              label="项目名称"
              width="180"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="项目所在地"
              width="160"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="splclxmc"
              label="审批流程类型"
              width="180"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="spsxmc"
              label="办理审批事项"
              width="180"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="blzt"
              label="办理状态"
              width="140"
              sortable
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="slsj"
              label="受理时间"
              width="140"
              sortable
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="bjsj"
              label="办结时间"
              width="140"
              sortable
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pageList">
          <aoge-page
            :totalPage="tablePage"
            :total="tableTotal"
            :currentPage="tablePageNum"
            :pageSize="tablePageSize"
            @handleCurrentChange="tableCurrentChange"
            @goCurrentPage="tableCurrentPage"
          ></aoge-page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headMore from "@/components/headMore/headMore.vue";
import aogePage from "@/components/pages/aogePage.vue";
import searchPanel from "@/components/searchPanel/searchPanel.vue";
export default {
  data() {
    return {
      breadTitle: "",
      searchVal: "",
      detailsInfo: {},
      noticePageSize: 15,
      noticePageNum: 1,
      noticeItem: "",
      noticeType: "",
      noticeTitle: "",
      noticeArr: [],
      noticeTotal: 0,
      totalPage: 0,
      tableData: [],
      // 表格数据
      tablePage: 0,
      tableTotal: 0,
      tablePageNum: 1,
      tablePageSize: 10,
      xmdm: "",
      xmmc: "",
      searchConfig: {
        form: [
          {
            label: "项目代码",
            key: "xmdm",
            type: "input",
            value: "",
            placeholder: "请输入项目代码",
          },
          {
            label: "项目名称",
            key: "xmmc",
            type: "input",
            value: "",
            placeholder: "请输入项目名称",
          },
          // {
          //   label: "受理时间",
          //   key: "times",
          //   type: "datePicker",
          //   config: {
          //     type: "date",
          //     placeholder: "选择日期",
          //   },
          // },
          // {
          //   label: "项目所在地",
          //   key: "originCity",
          //   type: "input",
          //   value: "",
          //   placeholder: "请输入",
          // },
        ],
      },
    };
  },
  components: {
    headMore,
    aogePage,
    searchPanel,
  },
  created() {
    console.log("路由传参：", this.$route.query);
    this.detailsInfo = this.$route.query;
    if (this.detailsInfo.type == "notice") {
      this.breadTitle = "通知列表";
      this.getNoticeData();
    } else if (this.detailsInfo.type == "law") {
      this.breadTitle = "政策列表";
      this.getNoticeData();
    } else if (this.detailsInfo.type == "table") {
      this.breadTitle = "审批信息公开";
      this.getTableData();
    } else {
      this.breadTitle = "";
    }
  },
  methods: {
    getNoticeData() {
      var that = this;
      var params = {
        pageNum: that.noticePageNum,
        pageSize: that.noticePageSize,
        item: that.detailsInfo.code,
        type: that.detailsInfo.type,
        title: that.searchVal,
      };
      that.$client
        .post("/portal!getPoliciesOrNoticesData.do", params)
        .then(function(res) {
          console.log("通告结果详情：", res);
          if (res.code == 200) {
            that.noticeArr = res.data.content || [];
            that.noticeTotal = res.data.totalSize || 0;
            that.totalPage = res.data.totalPages || 0;
          } else {
            // 请求失败
          }
        });
    },
    getTableData() {
      var that = this;
      var params = {
        pageNum: that.tablePageNum,
        pageSize: that.tablePageSize,
        xzqhdm: that.detailsInfo.code,
        xmdm: that.xmdm,
        xmmc: that.xmmc,
      };
      that.$client
        .post("/portal!getApprovalPublishedInfo.do", params)
        .then(function(res) {
          console.log("表格结果详情：", res);
          if (res.code == 200) {
            that.tableData = res.data.content || [];
            that.tablePage = res.data.totalPages || 0;
            that.tableTotal = res.data.totalSize || 0;
          } else {
            // 请求失败
          }
        });
    },
    //搜索
    goSearch() {
      this.noticePageNum = 1;
      this.getNoticeData();
    },
    handleCurrentChange(val) {
      this.noticePageNum = val;
      this.getNoticeData();
    },
    goCurrentPage(val) {
      this.noticePageNum = val;
      this.getNoticeData();
    },
    tableCurrentChange(val) {
      var that = this;
      that.tablePageNum = val;
      that.getTableData();
    },
    tableCurrentPage(val) {
      var that = this;
      that.tablePageNum = val;
      that.getTableData();
    },
    goTableSearch(val) {
      console.log("表格搜索：", val);
      var that = this;
      that.xmdm = val.xmdm;
      that.xmmc = val.xmmc;
      that.tablePageNum = 1;
      that.getTableData();
    },
    //跳转到list详情
    goDetails(info) {
      var that = this;
      console.log("list详情：", info);
      if (info.url) {
        var tempwindow = window.open("_blank");
        tempwindow.location = info.url;
      } else {
        this.$router.push({
          path: "/listDetails",
          query: {
            fileId: info.id,
            type: this.detailsInfo.type,
            isShowFile:info.isShowFile
          },
        });
      }
    },
    goResetPath() {
      //返回首页
      this.$router.push({
        path: "/",
      });
    },
  },
  beforeDestroy() {
    this.breadTitle = "";
    this.searchVal = "";
    this.detailsInfo = {};
    this.noticePageSize = 15;
    this.noticePageNum = 1;
    this.noticeItem = "";
    this.noticeType = "";
    this.noticeTitle = "";
    this.noticeArr = [];
    this.noticeTotal = 0;
    this.tableData = [];
    // 表格数据
    this.tablePage = 0;
    this.tableTotal = 0;
    this.tablePageNum = 1;
    this.tablePageSize = 10;
    this.xmdm = "";
    this.xmmc = "";
  },
};
</script>
<style lang="less" scoped>
.details {
  width: 100%;
  height: 100%;
  .banana {
    width: 100%;
    height: 185px;
    img {
      width: 100%;
    }
  }
}
.titleTips {
  height: 36px;
  background: #ffffff;
  box-shadow: 0px 2px 9px 0px rgba(218, 218, 218, 0.5);
  .bread_nav {
    line-height: 36px;
    font-size: 14px;
    cursor: pointer;
    width: 1320px;
    margin: 0 auto;
  }
}

.container {
  width: 1320px;
  margin: 0 auto;
  .main {
    margin-top: 16px;
  }
  .searchInput {
    margin-top: 16px;
    width: 100%;
  }
  .noticeList {
    .noticeList_one {
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 20px;
      cursor: pointer;
      .notice_title {
        text-overflow: ellipsis; //值为clip表示剪切，ellipsis时为显示省略号
        overflow: hidden;
        white-space: nowrap;
        width: 500px;
      }
    }
  }
  .tableSearch {
    padding-top: 16px;
  }
  .pageList {
    width: 100%;
    height: 42px;
    margin-top: 24px;
  }
}
</style>
